<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>充电桩列表</span>
        <el-button style="float: right; padding: 3px 0" type="text">添加充电桩</el-button>
      </div>
      <el-table :data="chargingList" style="width: 100%">
        <el-table-column prop="id" label="充电桩编号" width="120"></el-table-column>
        <el-table-column prop="name" label="充电桩名称" width="180"></el-table-column>
        <el-table-column prop="location" label="位置"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '空闲' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="power" label="功率(kW)" width="100"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ChargingManagement",
  data() {
    return {
      chargingList: [
        {
          id: 'CP001',
          name: 'A区充电桩1号',
          location: 'A区停车场',
          status: '空闲',
          power: '60'
        },
        {
          id: 'CP002',
          name: 'B区充电桩2号',
          location: 'B区停车场',
          status: '使用中',
          power: '120'
        },
        {
          id: 'CP003',
          name: 'C区充电桩3号',
          location: 'C区停车场',
          status: '空闲',
          power: '60'
        },
        {
          id: 'CP004',
          name: 'D区充电桩4号',
          location: 'D区停车场',
          status: '维护中',
          power: '120'
        }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      this.$message.info('编辑充电桩：' + row.name)
    },
    handleDelete(row) {
      this.$message.warning('删除充电桩：' + row.name)
    }
  }
}
</script> 